<template>
  <div>
    <!-- <ul>
      <li v-for="item in recommods" :key="item.id">
        <a href="#">
          <img :src="'http://sc.wolfcode.cn' + item.coverImg" alt="" />
          <p>{{ item.name }}</p>
          <p>{{ item.coin }}积分</p>
          <div class="btn">立即兑换</div>
        </a>
      </li>
    </ul> -->
    <ul class="kuang">
      <li
        v-for="item in recommods"
        :key="item.id"
        @click="$router.push(`/detil/${item.id}`)"
      >
        <img :src="`http://sc.wolfcode.cn${item.coverImg}`" alt="" />
        <div class="aligning">
          <p>{{ item.name }}</p>
          <p class="yanse">{{ item.coin }}积分</p>
          <button>立即兑换</button>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ["recommods"],
};
</script>
<style lang="less" scoped>
.kuang {
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;
  li {
    width: 285px;
    height: 412px;
    background: white;
    margin-right: 20px;
    margin-bottom: 20px;
    font-size: 18px;
    &:nth-child(4n) {
      margin-right: 0px;
    }
    img {
      width: 285px;
      height: 250px;
    }
    .aligning {
      box-sizing: border-box;
      text-align: center;
      flex-grow: 0;
      flex-direction: column;
      height: 162px;
      p {
        margin-top: 20px;
      }
      .yanse {
        color: #fd604d;
        font-size: 18px;
      }
      button {
        margin-top: 20px;
        width: 100px;
        height: 36px;
        border: blue 1px solid;
        color: blue;
      }
    }
  }
}
</style>